<template>
  <div>
    <!-- 目录导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
      <el-breadcrumb-item>MarkDown编辑器(mavon-editor)</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <mavon-editor v-model="markdownContent" 
        ref="markdownEditorRef"
        @change="handleMarkdownChange"
        style="height: 300px;"/>
    </el-card>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  // 注册
  components: {
    mavonEditor,
  },
  data() {
    return {
      markdownContent: '', // 输入的markdown
      markdownHtml: '',    // 及时转的html
    }
  },
  methods: {
    // 所有操作都会被解析重新渲染
    handleMarkdownChange(value, render){
      // render 为 markdown 解析后的结果[html]
      this.markdownHtml = render
      console.log(this.markdownHtml)
    }
  },
}
</script>

<style lang="less" scoped>
.el-card {
  height: 340px;
}
</style>